  <template>
  <div class="search-bar">
    <el-form
      inline
      label-position="right"
      label-width="90px"
      :model="seachData"
      ref="seachRef"
    >
      <!-- <el-row :gutter="10"> -->
        <template v-for="(item, index) in searchForm">
          <!-- <el-col :span="6" > -->
            <label :key="item.model + index" v-if="item.type === 'input'"> 
              <el-input
                :style="{ width: item.width + 'px' }"
                v-model.trim="seachData.input[item.model]"
                :placeholder="item.title">
              </el-input>
            </label>
          <!-- </el-col> -->
          <!-- <el-col :span="6" > -->
            <label :key="item.model + index + 'e'" v-if="item.type === 'select'">
              <el-select
              :filterable="item.filterable"
              
              v-model.trim="seachData.input[item.model]"
              :placeholder="item.title"
              @change="item.change ? item.change($event) : undefined"
            >
              <el-option
                v-for="(option, index) in item.options"
                :key="option.label + '' + index"
                :label="option.label"
                :value="option.value"
                :disabled="option.disabled"
              >
              </el-option>
              </el-select>
            </label>
            
          <!-- </el-col> -->
          
        </template>
        <!-- <el-col :span="6" class="search-cont"> -->
          <el-button
            class="btnAc btnSearch"
            :plain="button.plain"
            :round="button.round"
            :circle="button.circle"
            :disabled="button.disabled"
            @click="search"
            >查询</el-button
          >
        <!-- </el-col> -->
        <el-button class="btnNo btnReset" size="default" @click="resetData">重置</el-button>
        
      <!-- </el-row> -->
    </el-form>
  </div>
</template>

<script>
export default {
  name: "SearchBar",
  props: {
    searchForm: {
      default: () => {
        return new Array();
      }
    },
    button: {
      default: () => {
        return new Object();
      }
    }
  },
  data() {
    return {
      seachData: {
        input: {
         
        }
      }
    };
  },
  methods: {
    search() {
      this.$emit("search", this.seachData);
    },
    resetData(){
      this.seachData.input=''
      this.$emit("resetData", this.seachData);
    }
    
  }
};
</script>

<style scoped>
.search-bar {
  display: flex;
  flex-wrap: wrap;
}
.search-cont {
  display: flex;
  align-items: center;
}
.search-cont:last-child {
  margin-right: 0;
}
.title {
  padding-right: 5px;
  flex-shrink: 0;
  font-weight: 900;
  line-height: 40px;
  text-align: right;
}
 .elcol{
  margin-bottom: 10px;
}
</style>